import React, { Component } from 'react'
// 生命周期只有类组件有 函数组件没有生命周期 ，函数组件要想用生命周期需要用hooks来模拟
// 生命周期是在特定时间段内自动执行得函数
 class Left extends Component {
  // beforeCreate created beforeMountd mounted beforeUpadata updated bedistpoy distored
  constructor(props){ // 最先执行得一个生命周期
    super(props) //让当前组件继承了reactComponent得属性
    console.log("constructor")
    this.state = {
        name:1
    }
  } 
// constructor 一般不写，会默认自动生成一个，只不过程序员看不见，但是他确实有
// componentWillMount(){ // 组件挂在前，相当于是vue的beforeMountd,可以获取到this，但是获取不到dom
//    console.log("componentWillMount",this);
// }
componentDidMount(){ // 组件挂载完毕,一般用于发送网络请求
    console.log("componentDidMount",this,document.getElementById("app"))
}
shouldComponentUpdate(){ // 组件应该更新吗？这个生命不写，默认返回true,如果写，必须返回true，返回false之后所有的setSate就失效了
    console.log("shouldComponentUpdate");
    return true
}
// 考试得分点：合理释放资源 
componentWillUnmount(){ // 组件将要卸载时候，一般在这个生命周期里清楚延时器，将一些第三方的插件卸载掉，比如betterScroll
    console.log("componentWillUnmount","组件将要卸载")
    this.setState({ // 当一个变量得值为null 的时候在内存中占用得空间就被释放掉了
        name:null
    })
}
render() {  
    console.log("render")
    return (
      <div id='app'>{this.state.name}
            <button onClick={()=>{this.setState({name:"lis"})}}> 点我修改name</button>
      </div>
    )
  }
}


export default Left